import { cn } from '@/lib/utils'
import { Card, CardDescription, CardTitle } from '@/components/ui/Card'
import { FilesIcon } from 'lucide-react'

interface EmptyCardProps extends React.ComponentPropsWithoutRef<typeof Card> {
  title: string
  description?: string
  action?: React.ReactNode
  icon?: React.ComponentType<{ className?: string }>
}

export default function EmptyCard({
  title,
  description,
  icon: Icon = FilesIcon,
  action,
  className,
  ...props
}: EmptyCardProps) {
  return (
    <Card
      className={cn(
        'flex w-full flex-col items-center justify-center space-y-8 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm p-16 border-0',
        className
      )}
      {...props}
    >
      <div className="relative">
        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-emerald-400/20 to-teal-500/20 blur-xl" />
        <div className="relative flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-400/10 to-teal-500/10 border border-emerald-200/20 dark:border-emerald-800/20">
          <Icon className="text-emerald-600 dark:text-emerald-400 size-10" aria-hidden="true" />
        </div>
      </div>
      <div className="flex flex-col items-center gap-2 text-center">
        <CardTitle className="text-xl font-semibold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
          {title}
        </CardTitle>
        {description ? (
          <CardDescription className="text-sm text-zinc-500 dark:text-zinc-400 max-w-md">
            {description}
          </CardDescription>
        ) : null}
      </div>
      {action ? (
        <div className="mt-2">
          {action}
        </div>
      ) : null}
    </Card>
  )
}
